import React,{useState,useEffect} from 'react'
import axios from 'axios'
import {useNavigate} from "react-router-dom"
function Movie() {
  let navigate = useNavigate()
  let [arr,setArr] = useState([])
  useEffect(()=>{
      axios.get("/api/maoyanlist").then(res=>{
          setArr(res.data)
      })
  },[])
//   let goDetail = (id)=>{ // 动态路由跳转
//     console.log(id);
//     navigate("/detail/" + id)
//   }
let goDetail = (item)=>{
    console.log(item);
    navigate("/detail1",{
        state:item
    })
}
  return (
    <div>
        {
            arr && arr.length ? arr.map((item,index)=>{
                return <div key={index} className="homewrap" onClick={()=>goDetail(item)}>
                    <div>
                        <img src={item.img} alt="" />
                    </div>
                    <div>
                        <h5>{item.tit}</h5>
                        <p>观众评:<span>{item.num}</span></p>
                        <p>{item.des}</p>
                    </div>
                    <div>
                        <button>购票</button>
                    </div>
                </div>
            }):""
        }
    </div>
  )
}

export default Movie